<template>
  <div class="com-container">
    <dv-scroll-board
      class="dv-scr-board"
      :config="config"
      @click="clickRow($event)"
    />
    <el-dialog title="详细信息" :visible.sync="dialogVisible">
      <el-row>
        <el-col :span="4" class="shebei_img">
          <img src="../../assets/images/jiankong1.png" alt="" />
        </el-col>
        <el-col :span="4">
          <el-row class="title">设备名称：</el-row>
          <el-row class="title"> 设备编号：</el-row>
          <el-row class="title">所属区域：</el-row>
        </el-col>
        <el-col :span="6">
          <el-row>{{ data.name }}</el-row>
          <el-row>{{ data.id }}</el-row>
          <el-row>{{ data.area }}</el-row>
        </el-col>
        <el-col :span="4">
          <el-row class="title">发生时间：</el-row>
          <el-row class="title">告警分类：</el-row>
          <el-row class="title">是否处理：</el-row></el-col
        >
        <el-col :span="4">
          <el-row>{{ data.time }}</el-row>
          <el-row>{{ data.type }}</el-row>
          <el-row>{{ data.deal_with ? "已处理" : "未处理" }}</el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="title">告警描述:</el-col>
        <el-col :span="20">{{ data.describe }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="title">处理及备注:</el-col>
        <el-col :span="20">{{ data.remark }}</el-col>
      </el-row>
    </el-dialog>
  </div>
</template><script>
export default {
  data() {
    return {
      allData: null, //服务器返回的数据
      data: {
        name: " ",
        id: " ",
        area: " ",
        time: " ",
        type: " ",
        deal_with: " ",
        describe: " ",
        remark: " ",
      }, //渲染的数据

      config: {},
      dialogVisible: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取服务器数据
    async getData() {
      const res = await this.$http.get("/equipment/warn");
      this.allData = res.data;
      // console.log(this.allData);
      this.config = {
        header: ["名称", "分类", "是否处理"],
        data: this.allData.map((item) => [
          item.name,
          item.type,
          item.deal_with
            ? "<span  class='colorGrass'>已处理</span>"
            : "<span  class='colorRed'>未处理</span>",
        ]),
        rowNum: 10, //表格行数
        headerHeight: 35,
        indexHeader: "序号",
        headerBGC: "RGBA(38, 45, 56,0.3)", //表头
        oddRowBGC: "RGBA(38, 45, 56,0.5)", //奇数行
        evenRowBGC: "RGBA(38, 45, 56,0.3)", //偶数行
        index: true,
        // columnWidth: [60, 60, 60, 80],
        align: ["center"],
      };
      //   console.log(this.config.data);
    },
    //把毫秒数转换成日期格式
    formatDate(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second)
      );
    },
    //点击表格行
    clickRow(index) {
      //   console.log(index);
      this.data = this.allData[index.rowIndex];
      //把毫秒数转换成日期格式
      this.data.time = this.formatDate(this.data.time);
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  background: rgba(22, 31, 38, 0.5) !important;
}
/deep/ .el-dialog__title {
  color: #fff;
}
/deep/ .el-dialog__body {
  color: #fff;
}
img {
  text-align: center;
  width: 100px;
  height: 100px;
}
.el-row {
  font-size: 15px;
}
.el-col {
  font-size: 15px;
}
.title {
  font-weight: 700;
}
</style>